<template>
  <div class="com-turnover">
    <div ref="turnoverMain" class="turnover-main"></div>
  </div>
</template>

<script>
import { getTurnoverStatistics } from '@/api/statistics'
import * as echarts from 'echarts'
export default {
  name: 'ComTurnover',
  data () {
    return {
      turnoverData: {
        dateList: '',
        turnoverList: ''
      }
    }
  },
  created () {
    this.getTurnoverStatistics()
  },
  methods: {
    turnover () {
      const myChart = echarts.init(this.$refs.turnoverMain)
      const option = {
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          top: '5%',
          left: '10',
          right: '50',
          bottom: '12%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLabel: {
          // X轴字体颜色
            color: '#666',
            fontSize: 12
          },
          axisLine: {
          // X轴线颜色
            lineStyle: {
              color: '#E5E4E4',
              width: 1 // x轴线的宽度
            }
          },
          data: this.turnoverData.dateList // 后端传来的动态数据
        },
        yAxis: [
          {
            type: 'value',
            min: 0,
            axisLabel: {
              color: '#666',
              fontSize: 12
            }
          }
        ],
        series: [
          {
            name: '营业额',
            type: 'line',
            // stack: 'Total',
            smooth: false, // 否平滑曲线
            showSymbol: false, // 未显示鼠标上移的圆点
            symbolSize: 10,
            // symbol:"circle", //设置折线点定位实心点
            lineStyle: { // 直接设置线样式
              color: '#FFD000',
              width: 2 // 建议明确线宽
            },
            itemStyle: { // 单独设置折线点样式
              color: '#F29C1B'
            },
            emphasis: { // 高亮状态
              itemStyle: {
                color: '#fff',
                borderWidth: 5,
                borderColor: '#FFC100'
              },
              lineStyle: { // 高亮时线样式（可选）
                width: 3
              }
            },

            data: this.turnoverData.turnoverList
          }
        ]
      }
      myChart.setOption(option)
    },
    async getTurnoverStatistics () {
      const res = await getTurnoverStatistics({
        begin: this.begin,
        end: this.end
      })
      if (res.code === 1) {
        this.turnoverData.dateList = res.data.dateList.split(',')
        this.turnoverData.turnoverList = res.data.turnoverList.split(',')
        this.$nextTick(() => this.turnover())
      }
    }
  },
  props: {
    begin: {
      type: String,
      default: ''
    },
    end: {
      type: String,
      default: ''
    }
  },
  watch: {
    begin () {
      this.getTurnoverStatistics()
    }
  }
}
</script>

<style lang="less" scoped>
.turnover-main,
.com-turnover {
    height: 100%;
}
</style>
